<template>
  <div class="sure">
    <div class="List">
      <van-nav-bar title="预约确认" left-text left-arrow @click-left="onClickLeft" fixed />
    </div>

    <div class="content">
      <ul class="list">
        <li class="xinxi">行李柜信息</li>
        <li class="xinxi1">
          &nbsp;&nbsp;{{this.$route.params.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.$route.params.tel}}
          &nbsp;&nbsp;
        </li>
        <li class="xinxi2">
          <van-icon name="location-o"/>
          &nbsp;&nbsp;{{this.$route.params.address}}
        </li>
      </ul>
      <ul class="list">
        <li class="xinxi1">
          预约时间:&nbsp;{{this.$route.params.time}}
        </li>
      </ul>
    </div>

    <div class="content1">
      <ul class="list">
        <li class="xinxi">箱子信息</li>
        <li class="xinxi1">
          箱子规格
          <span class="lsan">{{this.$route.params.boxStandard}}</span>
        </li>
        <li class="xinxi1">
          预计周期
          <span>{{this.$route.params.value}}小时</span>
        </li>
        <li class="xinxi1">
          积分单价
          <span>{{this.$route.params.boxUnitPrice}}积分</span>
        </li>
      </ul>
    </div>
    <div class="content2">
      <span class="shifu">实付积分:</span>
      <span class="fen">{{this.$route.params.totalPrice}}.00</span>
      <van-button class="submit" type="primary" size="small" @click="tijiao">提交</van-button>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.list);
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    tijiao() {
      let paramForm = {
        orderName: this.$route.params.orderName,
        emptyBoxOrderTime: this.$route.params.emptyBoxOrderTime,
        emptyBoxCallName: this.$route.params.name,
        emptyBoxCallPhone: this.$route.params.tel,
        emptyBoxCallAddress: this.$route.params.address,
        boxStandard: this.$route.params.boxStandard,
        boxUnitPrice: this.$route.params.boxUnitPrice,
        leaseDuration: this.$route.params.value,
        totalPrice: this.$route.params.totalPrice
      };
      this.$axios.post("prod-api/app/box/order", paramForm).then(res => {
        if (200 == res.data.code) {
          this.$router.push("/home");
          this.$toast.fail("预约成功");
        } else {
          this.$toast.fail(res.data.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
body {
  margin: 0;
}
.lan {
  color: skyblue;
}
.sure {
  position: relative;
  background-color: #f4f5f7;
  height: 640px;

  .van-button {
    position: absolute;
    bottom: 22%;
    left: 80%;
    border-radius: 20px;

    background-color: #127bda;
  }

  .fen {
    position: absolute;
    bottom: 29%;
    left: 60%;
    color: #127bda;
  }
  .shifu {
    position: absolute;
    bottom: 34%;
    left: 40%;
    font-size: 13px;
  }
  .content {
    position: absolute;
    top: 5%;
    left: 2%;
    box-sizing: border-box;
    border-radius: 13px;
    width: 96%;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 42px;
    overflow: scroll;
  }
  .content1 {
    position: absolute;
    top: 28%;
    left: 2%;
    box-sizing: border-box;
    border-radius: 13px;
    width: 96%;
    margin: 0 auto;
    background-color: #fff;
    margin-top: 50px;
    overflow: scroll;
  }
  .content2 {
    position: absolute;
    bottom: 0;
    left: 2%;
    box-sizing: border-box;
    border-radius: 13px;
    width: 96%;
    margin: 0 auto;
    height: 55px;
    background-color: #fff;
    margin-top: 50px;
    overflow: scroll;
  }
}
.van-nav-bar {
  background-image: url("../assets/bg2.png");
}

.list {
  border-bottom: 1px solid #eee;
  width: 92%;
}
.xinxi {
  margin-top: 22px;
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: bold;
  margin-left: 15px;
}
.xinxi1 {
  margin-top: 10px;
  font-size: 11px;
  margin-left: 15px;
  margin-bottom: 5px;
  span {
    position: relative;
    left: 65%;
  }
}
.xinxi2 {
  font-size: 11px;
  color: dimgrey;
  margin-bottom: 10px;
}
.list {
  margin-left: 15px;
}
</style>
